document.addEventListener('DOMContentLoaded', function() {
    // console.log(11);
    var focus = document.querySelector('.focus');
    var arrowL = document.querySelector('.arrow-l');
    var arrowR = document.querySelector('.arrow-r');

    var focusWidth = focus.offsetWidth;
    focus.addEventListener('mouseenter', function() {
        arrowL.style.display = 'block';
        arrowR.style.display = 'block';
        clearInterval(timer);
        timer = null;
    })
    focus.addEventListener('mouseleave', function() {
        arrowL.style.display = 'none';
        arrowR.style.display = 'none';
        timer = setInterval(() => {
            arrowR.click();
        }, 2000);
    })

    // 生成小圆点
    var ul = focus.querySelector('ul');
    var olli = focus.querySelector('.circle');
    // ---------------------
    // console.log(ul.children.length);
    for (var i = 0; i < ul.children.length; i++) {

        // var liele = document.createElement('li');
        // liele.setAttribute("index", i);
        // ol.appendChild(liele);

        var li = $('<li></li>');
        // $(li).attr('index', i);
        // $('.focus ol.crcle').html('<li></li>');
        // $(olli).append(li);

        // $(li).attr("index", i);
        // liele.addEventListener('click', function() {

        //     for (var i = 0; i < ol.children.length; i++) {
        //         ol.children[i].className = '';
        //     }
        //     this.className = 'current';
        //     var index = this.getAttribute('index');
        //     circle = num = index;
        //     // 获取当前点击的索引
        //     animate(ul, -index * focusWidth);
        // })

        $(li).click(function() {
            $(this).addClass('current').siblings().removeClass();
            circle = num = $(this).index();
            animate(ul, -$(this).index() * focusWidth);
        })

    }

    // -----------------------------------------
    olli.children[0].className = 'current';
    var num = 0;
    var circle = 0;
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // 点击左边按钮
    arrowL.addEventListener('click', function() {
        if (flag) {
            flag = false;
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * focusWidth + 'px';
            }
            num--;
            animate(ul, -num * focusWidth, function() {
                flag = true;
            });

            circle--;
            if (circle < 0) {
                circle = olli.children.length - 1;
            }
            circleChange();
        }


    });
    var flag = true;
    // 点击右边按钮
    arrowR.addEventListener('click', function() {
        // console.log(num);
        if (flag) {
            flag = false;

            if (num == ul.children.length - 1) {
                num = 0;
                ul.style.left = 0;
            }
            num++;
            animate(ul, -num * focusWidth, function() {
                flag = true;
            });

            // console.log(num);

            circle++;
            if (circle == olli.children.length) {
                circle = 0;
            }
            circleChange();
        }



    });

    function circleChange() {
        for (var i = 0; i < olli.children.length; i++) {
            olli.children[i].className = '';
        }
        olli.children[circle].className = 'current';
    }

    var timer = setInterval(() => {
        arrowR.click();
    }, 2000);

})

$(function() {
    // $('.recommend')
    var recommendTop = $('.recommend').offset().top;

    // console.log(recommendTop);
    toggleFixedTool();

    function toggleFixedTool() {
        // 显示电梯导航控件
        if ($(document).scrollTop() >= recommendTop) {
            $('.fixedtool').fadeIn();
        } else {
            $('.fixedtool').fadeOut();
        }
    }

    $(window).scroll(function() {

        toggleFixedTool();
        if (flag) {
            // 左侧跟随
            $('.floor .w').each(function(i, ele) {
                // console.log(i);
                // console.log(ele);

                if ($(document).scrollTop() >= $(ele).offset().top) {
                    // console.log(ele);
                    $('.fixedtool li').eq(i).addClass('current').siblings().removeClass();

                }

            })
        }


    })

    var flag = true;
    $('.fixedtool li').click(function() {
        flag = false;
        $(this).addClass('current').siblings().removeClass();

        var current = $('.floor .w').eq($(this).index()).offset().top;
        // console.log(current);
        $('body, html').stop().animate({
            scrollTop: current
        }, function() {
            flag = true;
        })
    })
})